<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id='app'> {{ name }} -- {{ father }} </div>


  <div id='bpp'> {{ name }} -- {{ father }} </div>
</body>
<script>

  // 定义一个 mixin 混入对象
  const myMixin = {
    data () {
      return {
        father: '张大大'
      }
    },
    methods: {
      // 公共函数
    },
    mounted () {
      // 公共生命周期
    },
    computed: {

    }
  }

  const app = Vue.createApp({
    data () {
      return {
        name: '张三',
        // father: '张大大'
      }
    },
    mixins: [myMixin]
  })
  app.mount('#app')


  const bpp = Vue.createApp({
    data () {
      return {
        name: '张四',
        // father: '张大大'
      }
    },
    mixins: [myMixin]
  })
  bpp.mount('#bpp')

</script>

</html>
